<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.sinodata.bsm.center.util.spring.SpringContextHolder"%>
<%@page import="com.sinodata.bsm.center.service.resource.ResService"%>
<%@ page import="com.sinodata.bsm.common.vo.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%
ResService service = SpringContextHolder.getBean(ResService.class);
List<Res> list = service.findByResTypeId(1105050000000L);

String str = "<chart palette='2' caption='Country Comparison' shownames='1' showvalues='0' decimals='0' numberPrefix='$' useRoundEdges='0' legendBorderAlpha='0'>";
str+="<categories>";
str+="<category label='Product A' />";
str+="<category label='Product B' />";
str+="<category label='Product C' />";
str+="<category label='Product D' />";
str+="</categories>";
str+="<dataset seriesName='轻微' color='56a8f4' showValues='0'>";
str+="<set value='25601.34' />";
str+="<set value='20148.82' />";
str+="<set value='17372.76' />";
str+="<set value='35407.15' />";
str+="</dataset>";
str+="<dataset seriesName='警告' color='56a8f4' showValues='0'>";
str+="<set value='25601.34' />";
str+="<set value='20148.82' />";
str+="<set value='17372.76' />";
str+="<set value='35407.15' />";
str+="</dataset>";
str+="<dataset seriesName='警告' color='56a8f4' showValues='0'>";
str+="<set value='25601.34' />";
str+="<set value='20148.82' />";
str+="<set value='17372.76' />";
str+="<set value='35407.15' />";
str+="</dataset>";
str+="<dataset seriesName='警告' color='56a8f4' showValues='0'>";
str+="<set value='25601.34' />";
str+="<set value='20148.82' />";
str+="<set value='17372.76' />";
str+="<set value='35407.15' />";
str+="</dataset>";
str+="</chart>";
System.out.println(str);
%>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<%@ include file="../include/taglib.jsp"%>
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/tooltip.jsp"%>
	<%@ include file="../include/table.jsp"%>
<title>中科金财IT综合监控系统</title>
<link type="text/css" rel="stylesheet" href="/bsm/style/default/bsm/appviewdetail.css" />
<link type="text/css" rel="stylesheet" href="/bsm/style/default/bsm/appview.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
<style type="text/css">
 	*{
	  padding:0;
	  margin:0 auto;
	  font-size:12px;
      text-align:center;
	  }
 ul, ul li{
	  list-style:none;
	  }
  body{
    font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体";
     } 
 .max{
   min-width:1240px;
   height:100%;
   }
   .column{
   width:100%;
   height:100%;
   float:left;
   }
   .f-l{
   float:left;
   width:49.5%;
   height:290px;
   }
   .f-r{
   float:right;
   width:49.5%;
   height:290px;
   }
   h2{
   text-align:left;
   text-indent:10px;
   height:30px;
    line-height:30px;
   }
   .Module{
   width:110px;
   height:80px;
   float:left;
   position:relative;
   margin:5px 3px 5px 3px;
   }
   .Module a{
   width:110px;
   height:20px;
   position:absolute;
   top:55px;
   left:0px;
   z-index:111;
   text-align:conter;
   }
   .Module img{
   width:48px;
   height:48px;
   position:absolute;
   top:0px;
   left:32px;
   z-index:123;
   }
 .topn{
	 width:100%;
	 margin-left:0px;
	 border:1px solid #e9e9e9;
	 border-bottom:none;
	  border-right:none;
}
.topn th{
	height:22px;
	line-height:22px;
	font-size:12px;
	font-weight:400;
	color:#000;
	overflow:hidden;
	border-right:1px solid #e9e9e9;
	border-bottom:1px solid #e9e9e9;
	background:url(${pageContext.request.contextPath}/style/default/bsm/appview/th_bg3.jpg) repeat-x left top;
	}
.topn td{
	line-height:22px;	
	border-bottom:1px solid #e9e9e9;
	border-right:1px solid #e9e9e9;
	color:#000;
	font-size:12px;
	font-weight:400;
	text-align:center;
    padding:0px 6px;
	}
  tbody tr.tr3 td{
  background:#f1f6fc;
  }
  tbody tr:hover td{
	background:#ebf4fe;
} 
</style>
<script type="text/javascript">

$(document).ready(function() {
 			var chart = new FusionCharts("../../resources/charts/MSColumn2D1.swf", "ChartId", "500", "300", "0", "0");
		   chart.setDataXML("<%=str%>");		   
		   chart.render("chartdiv");
});
</script>
</head>
<body>
  <div class="max">
    <div class="column">
     	   <b class="b1"></b>
	       <b class="b2"></b>
	       <b class="b3"></b>
	       <b class="b4"></b> 
		 <div class="content">
		    <h2>应用系统监控</h2>
			<%
				int i=0;
				for(Res res : list){
				    if(i==3){
				        break;
				    }
			 %>
				<div class="Module">
				  <img src="${pageContext.request.contextPath}/style/default/bsm/appview/Core.png" width="48" height="48"/>
				  <a href="viewdetail1.jsp?resid=<%=res.getId() %>" ><%=res.getName()%></a>
				</div>
  			<% i++;} %>
				
           <br class="clear" />  
		 </div>
	  </div>
    <div class="column">
	  <div class="f-l">
	    <h2>服务响应时长TOPN</h2>
	    <table class="topn" width="100%"  cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">系统名</th>
    <th scope="col">服务名</th>
    <th scope="col">响应时长</th>
  </tr>

  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
 <tr class="tr3">
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
 <tr class="tr3">
    <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
 <tr class="tr3">
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
 <tr class="tr3">
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
    <tr class="tr3">
    <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
</table>

	  </div>
	  <div class="f-r">
	     <h2>24小时服务可用状态排行</h2>
		    <table class="topn" width="100%"  cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">系统名</th>
    <th scope="col">服务名</th>
    <th scope="col">响应时长</th>
  </tr>

  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
 <tr class="tr3">
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
 <tr class="tr3">
    <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
 <tr class="tr3">
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
 <tr class="tr3">
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
  <tr>
   <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
    <tr class="tr3">
    <td>前置系统</td>
    <td>Http模拟一</td>
    <td>1121ms</td>
  </tr>
</table>
	  </div>
	</div>
    <div class="column">
	  <h2>事件统计</h2>
			<div id = "chartdiv"></div>
	</div>
  </div>
	
</body>
</html>

